<template>
  <div class="system_setting_wrap">
    <el-card class="system_card">
      <div class="demo-collapse">
        <el-collapse accordion>
          <!-- 1. 账号设置 -->
          <el-collapse-item name="1">
            <template #title>
              <span class="header-title">账号设置</span>
            </template>

            <div class="user_setting_box"></div>
          </el-collapse-item>

          <!-- 2. 组件设置 -->
          <el-collapse-item name="2">
            <template #title>
              <span class="header-title">页面设置</span>
            </template>
            <div class="page_setting_box">
              <!-- 2.1 头部组件显隐设置  -->
              <div class="item">
                <span class="label">头部组件</span>
                <el-switch v-model="userStore.systemSettingInfo.componentSetting.isShowHeader" />
              </div>
              <!-- 2.2 菜单组件折叠设置 -->
              <div class="item">
                <span class="label">菜单折叠</span>
                <el-switch v-model="userStore.systemSettingInfo.componentSetting.isMenuCollapse" />
              </div>
            </div>
          </el-collapse-item>
          <!-- <el-collapse-item name="3">
            <template #title>
              组件设置
              <el-icon class="header-icon">
                <info-filled />
              </el-icon>
            </template>
            <div>Simplify the process: keep operating process simple and intuitive;</div>
            <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
            <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
          </el-collapse-item>
          <el-collapse-item name="4">
            <template #title>
              组件设置
              <el-icon class="header-icon">
                <info-filled />
              </el-icon>
            </template>
            <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
            <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
          </el-collapse-item> -->
        </el-collapse>
      </div>
    </el-card>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'SystemSetting'
})
</script>
<script setup>
import { useUserStore } from '@/store'

const userStore = useUserStore()
</script>

<style lang="scss" scoped>
@import url(../../assets/css/card/card-1.scss);
@import url(../../assets/css/el-collapse/el-collapse-1.scss);

.system_setting_wrap {
  width: 100%;
  height: 100%;

  .system_card {
    width: 100%;
    min-height: 100%;

    /* 页面设置 */
    .page_setting_box {
      padding: 0px 0px;
      display: flex;
      flex-direction: column;
      background-color: rgba(#333, 0.03);

      .item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 50px;
        box-sizing: border-box;
        border-top: 0.5px solid rgba(#333, 0.3);
        border-radius: 2px;
        line-height: 32px;

        .label {
          font-family: SYHT-Regular;
        }
      }
    }
  }
}
</style>
